<template>
	<view>
		<!-- <view class="" :style="'height:'+statusBarHeight+'rpx'"></view> -->
		<u-navbar
			title="TOPS"
			rightText="交易"
			:placeholder="true"
			:autoBack="true"
			@rightClick="show=true"
			style="font-weight: bold;"
			bgColor="#F2F2F2"
		>
		</u-navbar>
		<view class="detail">
			<view class="detailtop">
				<view class="text">总额</view>
				<view class="">6,547.00</view>
			</view>
		</view>
		<view class="detailname">历史记录</view>
		<scroll-view scroll-y="true" >
			<view class="detlist" :style="'height:'+scrollheight+ 'px;'">
				<view class="detlist_main flex-between" v-for="(item,index) in 10" :key="index">
					<view class="left">
						<view class="">充值TOPS</view>
						<view class="text">2024-10-10 10:30:00</view>
					</view>
					<view class="">+1028.12789</view>
				</view>
			</view>
		</scroll-view>
		<u-overlay :show="show"  @click="show = false">
			<view class="showtext" >
				<view class="textname" @click="$fun.jump(`/pages/wallet/flash`)">闪兑</view>
				<view class="textname" @click="$fun.jump(`/pages/wallet/twtpath?type=3&title=转账`)">转账</view>
				<view class="textname" @click="$fun.jump(`/pages/wallet/twtpath?type=2&title=提现`)">提币</view>
				<view class="textname" @click="$fun.jump(`/pages/wallet/twtpath?type=1&title=充值`)">充值</view>
				<view class="line"></view>
				<view class="textname" @click="show = false">
					取消
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				scrollheight:0,
				show:false
			}
		},
		onShow() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight=uni.getWindowInfo().windowHeight-180
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
page{
	background: #FFFFFF;
}
.detail{
	height: 178rpx;
	background: #F2F2F2;
	padding-top: 30rpx;
}
.detailtop{
	width: 750rpx;
	height: 148rpx;
	background-image: url('../../static/wallet/bg2@2x.png');
	background-repeat: no-repeat;
	background-size: 101.5% 100%;
	font-weight: 500;
	font-size: 60rpx;
	color: #FFFFFF;
	padding: 24rpx 60rpx;
	box-sizing: border-box;
	.text{
		font-size: 24rpx;
	}
}
.detailname{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	margin: 28rpx 30rpx 0rpx;
}
.detlist{
	&_main{
		width: 750rpx;
		height: 122rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		.text{
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
}
.showtext{
	width: 750rpx;
	// height: 316rpx;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	position: absolute;
	bottom: 0;
	background-color: #FFFFFF;
	.line{
		width: 750rpx;
		height: 16rpx;
		background: #F1F3F6;
		margin-top: 0;
	}
	.textname{
		line-height: 100rpx;
		text-align: center;
	}
}
</style>
